<template>
  <div class="home">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item
        :index="i.toString()"
        v-for="(item, i) in headerList"
        :key="i"
        @click="clickMenu(item)"
        >{{ item.name }}</el-menu-item
      >
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "0",
      headerList: [
        {
          name: "处理中心",
          path: "/home/about",
        },
        {
          name: "数据中心",
        },
        {
          name: "业务中心",
        },
      ],
    };
  },
  methods: {
    clickMenu(item) {
      this.$router.push({
        path: item.path,
      });
    },
  },
};
</script>
